<template>
  <div id="cartoon-list">
    <div class="header-box coll">
      <div class="form-flex">
        <div class="form-item">
          <span class="label">分类名称</span>
          <el-input size="default" v-model.trim="queryInfo.name" style="width: 130px; margin-right: 10px" clearable
            placeholder="请输入搜索的内容"></el-input>
        </div>
        <div class="form-item">
          <el-button type="primary" size="default" @click="getProductList">查询</el-button>
          <el-button type="primary" size="default" @click="onShow(1)">添加</el-button>
        </div>
      </div>
    </div>
    <div class="table-box coll">
      <el-table ref="workbenchTable" :height=" data.tableHeight" :data="data.tableData" empty-text="暂无数据"
        tooltip-effect="dark" style="width: 100%" :header-cell-style="{
          textAlign: 'center',
          backgroundColor: '#f5f7fa'
        }" :cell-style="{ textAlign: 'center' }" :row-style="{ height: '80px' }">
        <el-table-column type="selection" width="60" fixed />
        <el-table-column label="序号" width="60" fixed>
          <template #default="scope">
            {{ scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column label="分类名称" min-width="120px" prop="name" />
        <el-table-column label="创建时间" min-width="120px">
          <template #default="scope">
            {{ scope.row.create_time || '-' }}
          </template>
        </el-table-column>
        <el-table-column label="状态" min-width="120px" prop="status">
          <template #default="scope">
            {{ statusType[scope.row.status] }}
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template #default="scope">
            <!-- <el-button size="small" type="danger">编辑</el-button> -->
            <el-button size="small" type="primary" :icon="Edit" @click="onShow(2, scope.row)">编辑</el-button>
            <el-button size="small" type="danger" :icon="Delete" @click="deleteItem(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination v-model:currentPage="queryInfo.page" v-model:page-size="queryInfo.pageSize"
          :page-sizes="[20, 50, 100, 200]" background layout="slot, prev, pager, next" :total="data.total">
          <span style="margin-right: 5px">当前共{{ data.total }}条</span>
        </el-pagination>
      </div>
    </div>
    <el-dialog v-model="dialogFormVisible" :title="data.dialogType == 1 ? '添加' : '修改'" width="20%"
      @close="categoryClose">
      <div class="add-content">
        <div class="form-item">
          <div class="label">分类名称：</div>
          <div class="cartoon-name">
            <el-input v-model="categotyItem.name" placeholder="请输入分类名称" />
          </div>
        </div>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="categoryClose()">取消</el-button>
          <el-button type="primary" @click="addCartoon(data.dialogType)">{{
              data.dialogType == 1 ? '保存' : '修改'
          }}</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import { reactive, onMounted, getCurrentInstance } from 'vue'
import { ElMessage } from 'element-plus'
import { Delete, Edit } from '@element-plus/icons-vue'
import { statusType, dialogFormVisible, categotyItem, queryInfo } from './ts/data'
import { CartoonCategory } from '@/service/cartoonCategory'
// import { getTableHeight } from '@/hooks/utils'
import { getTableHeight } from '@/hooks/useCommon'
const data = reactive({
  disabled: false,
  tableHeight: 0,
  tableData: [],
  total: 0,
  dialogVisible: false,
  dialogTitle: '',
  dialogType: 1
})
// @ts-ignore
const { proxy } = getCurrentInstance()
const api = proxy.$api
const cartoon = new CartoonCategory(api)

onMounted(() => {
  // data.tableHeight = getTableHeight(180)
  data.tableHeight = getTableHeight(180)
  // console.log(subHeight.value,'subHeight');
  
  getProductList()
})

// 获取分类列表
const getProductList = async () => {
  const res = await cartoon.getProductList(queryInfo, 'getVideoCategory')
  if (res.code == 200) {
    data.tableData = res?.data?.data
    data.total = res?.data?.total
  }
}
// 添加分类
// 删除
// 获取表格的高度
// const getTableHeight = async () => {
//   // console.log(document.getElementById('cartoon-list'),'==>')
//   const windowHeight = document.documentElement.clientHeight || document.body.clientHeight
//   // 此处减去100即为当前屏幕内除了表格高度以外其它内容的总高度，
//   data.tableHeight = windowHeight - 170
// }
const categoryClose = () => {
  dialogFormVisible.value = false
  categotyItem.name = ''
}
</script>

<style scoped lang="less" src="./css/cartoon-list.less">

</style>
